<script setup>
let students  = [
{name: '张三', sn: '01'},
{name: '李四', sn: '02'},
{name: '王五', sn: '03'},
{name: '赵六', sn: '04'},
{name: '孙七', sn: '05'}
];
import{ref} from 'vue'
import{useRouter} from "vue-router";
const router = useRouter()

const toDemo =()=>{
  router.push({path:'/demo'})
}
const toHello = ()=>{
  router.push({name:'hello'})
}
</script>

<template>
<div>
  <h1>刘圣</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
  <table border="1">
  <tr>
  <td>序号</td>
  <td>姓名</td>
  <td>学号</td>
  </tr>
  <tr v-for="(item,index) in students" :key="index">
  <td>{{ index + 1 }}</td>
  <td>{{ item.name }}</td>
  <td>{{ item.sn }}</td>
  </tr>
  </table>




<!--摸鱼-->
  <div id="d1">
    <div id="d2">
      <RouterLink to="/demo">去demo</RouterLink>
      <br>
      <RouterLink to="/hello">去hello</RouterLink>
      <br>
      <button @click="toDemo">去demo</button>
      <br>
      <button @click="toHello">去hello</button>

</div>
<div id="d3">
  <RouterView/>
</div>

</div>

  </div>
</template>
<style scoped>
#d1{
  display: flex;
}
#d2{
  width: 300px;
  height: 100%;
  background-color: blue;
}

</style>




